<template>
  <transition name="message-transition">
    <div v-show="show" class="message">
      <div class="message-content">
        <template v-if="content == 'success'">
          <img src="../../assets/images/success.png">
          <div>Success</div>
        </template>
        <template v-if="content == 'failed'">
          <img src="../../assets/images/failed.png">
          <div>Failed</div>
        </template>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "CusMessage",
  computed: {
    show() {
      return this.$store.state.message.show;
    },
    content() {
      return this.$store.state.message.content;
    },
  },
};
</script>

<style scoped>
.message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2015;
  pointer-events: none;
}
.message-content img{
  width: 42pt;
}
.message-content {
  /* width: 130px;
  height: 130px; */
  width: 64pt;
  height: 64pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 10px;
  padding: 30px;
  border-radius: 10px;
  background-color: rgba(241, 231, 223, 0.5);
  /* font-size: 20px; */
  font-size: 14pt;
  color: #000;
  font-weight: 500;
}
.message-transition-enter-active,
.message-transition-leave-active {
  transition: opacity 0.5s;
}
.message-transition-leave,
.message-transition-enter-to {
  opacity: 1;
}
.message-transition-enter,
.message-transition-leave-to {
  opacity: 0;
}
</style>